<template>
    <div>
        <div v-if="tableShow">
            <div class="header" style="background-color: white">
                <el-page-header @back="goBack" content="开具发票">
                </el-page-header>
            </div>
            <el-divider></el-divider>
            <el-form>
                <el-container>
                    <el-form-item>
                        <el-input v-model="cwInvoice.inputValueType" placeholder="案号" clearable></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-select v-model="cwInvoice.BillType" clearable placeholder="发票类型">
                            <el-option
                                    v-for="item in cwInvoiceType"
                                    :key="item.TypeId"
                                    :label="item.Typevalue"
                                    :value="item.TypeId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item style="margin-left: 20px">
                        <el-select v-model="cwInvoice.cwInvoiceItem" clearable
                                   placeholder="开票项目">
                            <el-option
                                    v-for="item in cwInvoiceItemOption"
                                    :key="item.ItemID"
                                    :label="item.Itemvalue"
                                    :value="item.ItemID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-date-picker
                                placeholder="开票日期开始时间"
                                v-model="cwInvoice.cw_application_date"
                                type="date" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-date-picker
                                placeholder="开票日期结束时间"
                                v-model="cwInvoice.cw_invoice_date"
                                type="date" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-button type="primary" @click="List()" icon="el-icon-search">检索</el-button>
                    </el-form-item>
                </el-container>
            </el-form>
            <el-table
                    :data="inoutType.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    border
                    style="width: 100%;font-size: 18px;">
                <el-table-column
                        prop="a"
                        v-if="false">
                </el-table-column>
                <el-table-column
                        prop="cid"
                        v-if="false">
                </el-table-column>
                <el-table-column
                        prop="case_no"
                        label="案号"
                        width="220px">
                </el-table-column>
                <el-table-column
                        prop="sqr"
                        label="申请人">
                </el-table-column>
                <el-table-column
                        prop="bals"
                        label="办案律师">
                </el-table-column>
                <el-table-column
                        prop="cw_invoice_title"
                        label="发票抬头">
                </el-table-column>
                <el-table-column
                        prop="case_agencyfee"
                        label="代理费">
                </el-table-column>
                <el-table-column
                        prop="cw_invoice_money"
                        label="发票金额">
                </el-table-column>
                <el-table-column
                        prop="case_invoiced"
                        label="已开发票金额(元)"
                        width="220px">
                </el-table-column>
                <el-table-column
                        prop="case_paidsal"
                        label="已付款(元)">
                </el-table-column>
                <el-table-column
                        prop="cw_invoice_date"
                        label="开票日期">
                </el-table-column>
                <el-table-column
                        prop="cw_invoice_status"
                        label="开票状态">
                    <template slot-scope="scope">
                        {{scope.row.cw_invoice_status=="Y"?'已开':'未开'}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope" >
                        <el-dropdown trigger="click" @command="handleCommand">
                            <el-button>
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="{id:scope.row.a,type:'查看'}">查看</el-dropdown-item>
                                <el-dropdown-item :command="{id:scope.row,type:'添加入款记录'}">添加入款记录</el-dropdown-item>
                                <el-dropdown-item :command="{id:scope.row.cid,type:'删除'}">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <el-divider></el-divider>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="inoutType.length"> //这是显示总共有多少数据，
            </el-pagination>
        </div>
        <div v-if="flag">
            <div class="header" style="background-color: white">
                <el-page-header @back="comeback" content="详情">
                </el-page-header>
            </div>
            <el-divider></el-divider>
            <div class="message">
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>客户名称:</span><br />{{InvoicesByid.emp_name}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>案号:</span><br />{{InvoicesByid.case_no}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>实收金额:</span><br />{{InvoicesByid.case_paidsal}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>发票抬头:</span><br />{{InvoicesByid.cw_invoice_title}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开票金额:</span><br />{{InvoicesByid.cw_invoice_money}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开票项目:</span><br />{{InvoicesByid.cw_invoice_item}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开具类型:</span><br />{{InvoicesByid.cw_open_type}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>发票类型:</span><br />{{InvoicesByid.cw_invoice_type}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>纳税人识别号:</span><br />{{InvoicesByid.cw_taxpayer_identity_number}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>税务登记证副本复印件:</span><br />{{InvoicesByid.file_name}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>基本户开户银行:</span><br />{{InvoicesByid.cw_basic_bankofdeposit}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>基本户开户账号:</span><br />{{InvoicesByid.cw_account_number}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>注册场所地址:</span><br />{{InvoicesByid.cw_registered_address}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>注册固定电话:</span><br />{{InvoicesByid.cw_fixedline_telephone}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>收件人:</span><br />{{InvoicesByid.system_user_recipients}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>收件地址:</span><br />{{InvoicesByid.emp_site}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>联系电话:</span><br />{{InvoicesByid.emp_contact_phone}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>申请日期:</span><br />{{InvoicesByid.cw_application_date}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>申请备注:</span><br />{{InvoicesByid.cw_application_remark}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开票状态:</span><br />{{InvoicesByid.cw_invoice_status}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>发票号:</span><br />{{InvoicesByid.cw_invoice_number}}
                </div>
                <div style="padding: 10px" class="grid-content bg-purple">
                    <span>开票备注:</span><br />{{InvoicesByid.cw_invoice_remark}}
                </div>
            </div>
        </div>
        <div v-if="addm">
            <div class="header" style="background-color: white">
                <el-page-header @back="come" content="添加入款记录">
                </el-page-header>
            </div>
            <el-divider></el-divider>
            <div>
                <el-row>
                    <el-col :span="24" style="margin-left: 50px">
                        <div class="grid-content bg-purple-dark"><span style="font-size: 30px;font-weight: 600">案件收支</span>
                        </div>
                    </el-col>
                </el-row>
                <el-form style="margin-left: 50px;margin-top: 20px">
                    <el-container>
                        <el-form-item label="案件：">
                            <el-input v-model="caseValue" style="width: 500px;" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="已收款：" style="margin-left: 20px">
                            <el-input :value="casePaidsal+'元'" style="width: 500px;" readonly></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="收款金额：">
                            <el-input v-model="cwInout.collectionMoney" style="width: 500px;" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="收款日期：" style="margin-left: 20px">
                            <el-date-picker style="width: 500px;"
                                    v-model="cwInout.collectionDate"
                                    type="date" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-container>
                    <el-container>
                        <el-form-item>
                            <el-button type="primary" @click="nextPageBtn">下一步</el-button>
                        </el-form-item>
                    </el-container>
                </el-form>
            </div>
        </div>
        <div v-if="xyb">
            <div class="header" style="background-color: white">
                <el-page-header @back="perPageBtn" content="添加入款记录">
                </el-page-header>
            </div>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="24" style="margin-left: 50px">
                    <div class="grid-content bg-purple-dark"><span style="font-size: 30px;font-weight: 600">案件收支</span>
                    </div>
                </el-col>
            </el-row>
            <el-form style="margin-left: 50px;margin-top: 20px">
                <el-container>
                    <el-form-item label="收支日期：">
                        <el-input :value="cwInout.collectionDate" readonly style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="收支金额：" style="margin-left: 20px">
                        <el-input :value="cwInout.collectionMoney" readonly style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="代理费：">
                        <el-input :value="caseAgencyfee" readonly style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="已收款：" style="margin-left: 20px">
                        <el-input :value="casePaidsal" readonly style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="已开发票：">
                        <el-input :value="caseInvoiced" readonly style="width: 500px;"></el-input>
                    </el-form-item>
                    <el-form-item label="收支类别：" style="margin-left: 20px">
                        <el-cascader placeholder="请选择收支类别" clearable
                                     style="width: 500px;"
                                     v-model="cwInout.id"
                                     :options="incomeType"
                                     :props="{ expandTrigger: 'hover' ,checkStrictly:true,emitPath:true }"
                                     @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="支付方式：">
                        <el-select v-model="cwInout.cWPayType" clearable placeholder="请选择支付方式" style="width: 500px;">
                            <el-option
                                    v-for="item in payOption"
                                    :key="item.cWPayType"
                                    :label="item.payType"
                                    :value="item.cWPayType">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="付款人：" style="margin-left: 20px">
                        <el-input v-model="cwInout.cwPayer"  style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="备注：">
                        <el-input type="textarea" v-model="cwInout.cwRemark" style="width: 1000px;"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item>
                        <el-button type="primary" @click="tj">确认提交</el-button>
                    </el-form-item>
                </el-container>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {CwInvoiceService} from "../../../model/ww/cw_invoice/CwInvoiceService";
    import CwInoutTypeService from '../../../model/ww/cw_inout_type/CwInoutTypeService'
    import CwInoutService from '../../../model/ww/cw_inout/CwInoutService'


    const cwInoutTypeService=CwInoutTypeService.getInstance();
    const cwInoutService=CwInoutService.getInstance();
    const cwInvoiceService = CwInvoiceService.getInstance();
    export default {
        name: "KpList",
        data(){
            return {
                cwInvoiceType: [{
                    TypeId: 1,
                    Typevalue: '增值税专用发票'
                },
                    {
                        TypeId: 2,
                        Typevalue: '增值税普通发票'
                    },
                    {
                        TypeId: 3,
                        Typevalue: '通用机打发票'
                    }
                ],
                cwInvoiceItemOption: [{
                    ItemID: 1,
                    Itemvalue: '律师代理费'
                },
                    {
                        ItemID: 2,
                        Itemvalue: '法律顾问费'
                    },
                    {
                        ItemID: 3,
                        Itemvalue: '咨询费'
                    },
                    {
                        ItemID: 4,
                        Itemvalue: '法务托管费'
                    },
                    {
                        ItemID: 5,
                        Itemvalue: '非诉'
                    },
                    {
                        ItemID: 6,
                        Itemvalue: '其他(备注中填写)'
                    }

                ],
                cwInvoice: {},//发票对象
                inoutType:[],//表格数据
                currentPage: 1, //初始页
                pagesize: 5,  //每页的数据
                flag:false,//查看的显示状态
                tableShow:true,//表格默认状态
                addm :false,//添加入款状态
                InvoicesByid:{},//发票数据
                casePaidsal:'', //已收款
                caseValue:'', //案件
                xyb :false,  //下一步(状态)
                caseAgencyfee:'',//代理费
                caseInvoiced:'',//已开发票
                cwInout:{  //入款对象
                    collectionMoney:'',
                    collectionDate:'',
                    cwPayer:'',//付款人
                    cwInoutPerson:'', //收支人
                },
                payOption: [
                    {
                        cWPayType: '1',
                        payType: '网银'
                    },
                    {
                        cWPayType: '2',
                        payType: '银行卡'
                    },
                    {
                        cWPayType: '3',
                        payType: '支付宝'
                    },
                    {
                        cWPayType: '4',
                        payType: '微信'
                    },
                    {
                        cWPayType: '5',
                        payType: '其他'
                    }
                ],
                incomeType:[], //收支类别数据

            }

        },
        methods:{
            List(){
                cwInvoiceService.kpList(this.cwInvoice).then((response)=>{
                    this.inoutType=response.data.data
                })

            },
            handleSizeChange(size) {
                this.pagesize = size; //每页下拉显示数据

            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage; //点击第几页

            },
            handleCommand(command){//下拉菜单
                if(command.type=='删除'){
                    cwInvoiceService.del(command.id).then(()=>{
                        this.List();
                    })
                }
                if(command.type=='添加入款记录'){
                    this.tableShow=!this.tableShow
                    this.addm=!this.addm
                    this.caseValue=command.id.case_no
                    this.casePaidsal=command.id.case_paidsal
                    this.caseAgencyfee=command.id.case_agencyfee
                    this.caseInvoiced=command.id.case_invoiced
                    this.cwInout.caseLawId=command.id.a
                    this.cwInout.cwInoutPerson=command.id.sqr

                    // command.id
                }
                if(command.type=='查看'){
                    this.tableShow=!this.tableShow
                    this.flag=!this.flag
                    cwInvoiceService.cwinvoicegetById(command.id).then((response)=>{
                        this.InvoicesByid=response.data.data
                    })

                }
            },
            comeback(){
                this.tableShow=!this.tableShow
                this.flag=!this.flag
            },
            come(){
                this.tableShow=!this.tableShow;
                this.addm=!this.addm;
            },
            nextPageBtn(){
                this.addm=!this.addm
                this.xyb=!this.xyb
                this.cwInoutType()
            },
            perPageBtn(){
                this.addm=!this.addm
                this.xyb=!this.xyb
            },
            //查询收支类型渲染下拉框
            cwInoutType(){
                cwInoutTypeService.findCaseType().then((response)=>{
                    this.incomeType=response.data.data
                })
            },
            handleChange(ids){  //收支类别下拉框改变事件
                if(ids.length==2){
                    this.cwInout.id=ids[ids.length-1]
                }
                if(ids.length==1){
                    this.cwInout.id=ids[ids.length-1]
                }
            },
            tj(){//提交
                var date=new Date();
                var time=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDay()
                this.cwInout.cwEnteringDate=time
                cwInoutService.savaTj(this.cwInout).then(()=>{
                    this.xyb = !this.xyb
                    this.tableShow=!this.tableShow
                })
            },
            goBack(){
                history.back()
            }
        },
        created() {
            this.List()
        }
    }
</script>

<style scoped>
    .message{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .bg-purple {
        background: #FFFFFF;
        border: 1px solid  darkgray;
        width: 23.5%;
        height: 50px;
    }
</style>
